<template>
    <div class="card-box">
        <div class="card-box">
            <div class="card-title">退租信息</div>
            <el-form ref="form" class="form-wrap" size="small"  :model="formData">
                <el-form-item label="终止类型" prop="endType">
                    <span>{{endType}}</span>
                </el-form-item>
                <el-form-item label="退租日期" prop="backDate" >
                    {{formData!=null?formData.backDate:""}}
                </el-form-item>
                <el-form-item label="退租人" prop="backPerson">
                    {{formData!=null?formData.backPerson:""}}
                </el-form-item>
                <el-form-item label="退租人证件号" prop="certificateNum">
                    <span>{{formData!=null?formData.backCertificateNum:""}}</span>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <span>{{formData!=null?formData.remarks:""}}</span>
                </el-form-item>
                <el-form-item label="是否已结清费用" prop="feeComplete">
                    <span>{{formData!=null?(formData.feeComplete==1?"已结清":"未结清"):""}}</span>
                </el-form-item>
            </el-form>
            <div class="card-title">附件</div>
            <el-row :gutter="20">
                <el-col>
                    <upload-media type="file"
                                  ref="myUpload"
                                  modelType="lessor-contract"
                                  :isShowFileList="true"
                                  :isView="true"
                                 >
                    </upload-media>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import uploadMedia from '@/components/upload-media'
    import {getContractBack} from '@/views/wy-lessor/rentalSociety/api/contract.js'

    export default {
        name: "contract-back-view",
        components: {uploadMedia},
        data() {
            return {
                //dialogVisible: false,
                //合同终止类型，下拉值
                //contractEndType:[],
                lessorContractBackId: "",
                endType:"",
                formData: {
                    lessorContractBackId: null,
                    endType: null,
                    backDate: null,
                    backPerson: null,
                    backCertificateNum: "",
                    remarks: "",
                    feeComplete: 0
                },
                fileList: [],

            }
        },

        computed: mapState({
            //调价方式
            contractEndType: state => {
                let data = state.dict.find(item => item.type === "contract_end_type") || {};
                return data.children || [];
            }
        }),

        mounted:
            function () {
                //this.loadBackInfo();
            },
        methods: {
            //加载数据
            loadBackInfo(contractId) {

                let lessorContractId=contractId;//this.$route.query.id;
                getContractBack(lessorContractId).then(
                    response => {
                        //alert(response)
                        if (response.data.code == 0) {

                            this.formData = response.data.data;

                            for (var j = 0, len = this.contractEndType.length; j < len; j++) {
                                if (this.formData !=null && this.contractEndType[j].value == this.formData.endType) {
                                    this.endType = this.contractEndType[j].label;
                                }
                            }

                            //加载退租附件
                            if(this.formData!=null) {
                                this.$refs.myUpload.getFiles(this.formData.lessorContractBackId);
                            }


                        } else {
                            this.$alert("读取合同退租信息返回错误：" + response.data.code + response.data.message);
                        }
                    }
                )
            }
        }
    }


</script>
<style scoped lang="scss">
    
    @include formWrap();

</style>
